<template>
  <div class="container-box">
    <div class="header">
      <div @click="$router.go(-1)">
          <a-icon type="left" />
      </div>
      <div>
          <h1>在线客服</h1>
      </div>
    </div>
    <PullRefresh
      v-model="isLoading"
      class="pull-s"
      :pulling-text="pullText"
      :loosing-text="loosText"
      @refresh="onRefresh"
    >
      <div id="chat_content" class="chat-content" @click="() => {showMore = false}">
        <!-- recordContent 聊天记录数组-->
        <div v-for="(itemc, indexc) in recordContent" :key="indexc">
          <!-- 对方 -->
          <div v-if="itemc.MsgType === '2'" class="word">
            <img :src="itemc.headUrl">
            <div class="info">
              <!-- <p class="time">{{ itemc.nickName }} {{ itemc.timestamp }}</p> -->
              <div v-if="itemc.contentType === '1'" class="info-content p-10">{{ itemc.contactText }}</div>
              <div v-if="itemc.contentType === '2'" class="info-content p-10">
                <VanImage width="100" height="100" :src="itemc.contactImage" @click="imageClick" />
              </div>
              <!-- <div v-if="itemc.contentType === '3'" class="info-content">
                <div class="w-200">
                  <div class="d-guess">猜你想问</div>
                  <Cell v-for="(itemq, indexq) in itemc.contactList" :key="indexq" border :value="itemq.content" :is-link="true" />
                  <Cell border :center="true">
                    <div class="d-more">更多问题</div>
                  </Cell>
                </div>
              </div> -->
            </div>
          </div>
          <!-- 我的 -->
          <div v-if="itemc.MsgType === '1'" class="word-my">
            <div class="info">
              <!-- <p class="time">{{ itemc.nickName }} {{ itemc.timestamp }}</p> -->
              <div v-if="itemc.contentType === '1'" class="info-content p-10">{{ itemc.contactText }}</div>
              <div v-if="itemc.contentType === '2'" class="info-content p-10">
                <VanImage width="100" height="100" fit="contain" :src="itemc.contactImage" @click="imageClick" />
              </div>
              <div v-if="itemc.contentType === '3'" class="info-content">{{ itemc.contactText }}</div>
            </div>
            <img :src="itemc.headUrl">
          </div>
          <!--时间戳-->
          <div v-if="itemc.MsgType === '3'" class="d-stamp">
            <span v-if="itemc.lastPartTimeStamp !== ''" class="s-stamp">
              {{ itemc.lastPartTimeStamp }}
            </span>
            <!-- <span v-else class="s-close">
              您很长时间没说话，会话已结束
            </span> -->
          </div>
        </div>
      </div>
    </PullRefresh>
    <Search
      v-model="searchWords"
      show-action
      left-icon=""
      shape="square"
      background="#E2E3E5"
      placeholder="请输入搜索关键词"
      @search="onSearch"
    >
      <div slot="action" class="d-add" @click="() => {showMore = !showMore}">
        <Icon name="add-o" size="20" />
      </div>
    </Search>
  </div>
</template>
<script>
import { PullRefresh, Search, NavBar, Image as VanImage, ImagePreview, Cell, Icon, Uploader } from 'vant'
export default {
  components: {
    PullRefresh,
    Search,
    NavBar,
    VanImage,
    Cell,
    Icon,
    Uploader
  },
  data() {
    return {
      isLoading: false,
      pullText: '下拉查看历史记录',
      loosText: '加载历史会话',
      leftArrow: false,
      showMore: false,
      searchWords: '',
      iconList: [
        {
          icon: 'photo',
          name: '发送图片'
        },
        {
          icon: 'printer',
          name: '发送文件'
        },
        {
          icon: 'more',
          name: '留言'
        }
      ],
      recordContent: [
        {
          MsgType: '1', // MsgType: 1 => customer 2 => service 3 => tips
          headUrl: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3355464299,584008140&fm=26&gp=0.jpg', // 头像url地址
          nickName: '我', // 昵称
          timestamp: '2020-11-19 12:12:12', // 时间戳
          contentType: '1', // contentType: 1 => Text 2 => image 3 => List
          contactText: 'how are you 哒哒哒哒哒哒的 防守打法士大夫撒地方',
          contactImage: '', // 图片地址
          contactList: [], // 提供选项列表
          lastPartTimeStamp: '' // 上一次会话时间戳
        },
        {
          MsgType: '2',
          headUrl: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2620306848,1106594030&fm=26&gp=0.jpg',
          nickName: '刘二街',
          timestamp: '2020-11-19 12:13:14',
          contentType: '1',
          contactText: 'i am fine, thank you 哒哒哒哒哒哒的 防守打法士大夫撒地方',
          contactImage: '',
          contactList: [],
          lastPartTimeStamp: ''
        },
        { // 结束会话
          MsgType: '3',
          headUrl: '',
          nickName: '',
          timestamp: '',
          contentType: '',
          contactText: '',
          contactImage: '',
          contactList: [],
          lastPartTimeStamp: ''
        }
      ],
      historyContent: [
        {
          MsgType: '1',
          headUrl: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3355464299,584008140&fm=26&gp=0.jpg',
          nickName: '我',
          timestamp: '2020-11-18 08:12:12',
          contentType: '2',
          contactText: '故人西辞黄鹤楼',
          contactImage: 'https://img.yzcdn.cn/vant/cat.jpeg',
          contactList: [],
          lastPartTimeStamp: ''
        },
        {
          MsgType: '2',
          headUrl: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2620306848,1106594030&fm=26&gp=0.jpg',
          nickName: '刘二街',
          timestamp: '2020-11-18 09:13:14',
          contentType: '3',
          contactText: '烟花三月下扬州',
          contactImage: '',
          contactList: [
            {
              content: '你想问这个吗',
              id: '1'
            },
            {
              content: '你想问那个吗',
              id: '2'
            },
            {
              content: '你到底想问什么呀',
              id: '3'
            }
          ],
          lastPartTimeStamp: '20/11/20 14:19:58'
        },
        { // 上一次会话时间戳 看lastPartTimeStamp是否为空
          MsgType: '3',
          headUrl: '',
          nickName: '',
          timestamp: '',
          contentType: '',
          contactText: '',
          contactImage: '',
          contactList: [],
          lastPartTimeStamp: '20/11/20 14:19:58'
        }
      ],
      sessionInput: {}
    }
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false
        let len = this.historyContent.length
        for (let i = len - 1; i >= 0; i--) {
          this.recordContent.unshift(this.historyContent[i])
        }
      }, 1000)
    },
    helloworld() {
      console.log('11')
    },
    onSearch(value) {
      if (value !== '') {
        this.sessionInput = {
          MsgType: '1',
          headUrl: 'http://192.168.100.202:80/group1/M00/00/04/wKhkyl-zPQ6AF3oCAAHc04qwej4332.jpg',
          nickName: '我',
          timestamp: this.getCurrentTimeStamp(),
          contentType: '1',
          contactText: value,
          contactList: [],
          lastPartTimeStamp: ''
        }
        this.searchWords = ''
        this.recordContent.push(this.sessionInput)
        this.sessionInput = {}
        this.scrollToBottom()
      }
    },
    getCurrentTimeStamp() {
      let myDate = new Date()
      let month = myDate.getMonth() + 1
      let day = myDate.getDate()
      let hour = myDate.getHours()
      let minute = myDate.getMinutes()
      let second = myDate.getSeconds()
      month = month.toString().length === 1 ? '0' + month : month
      day = day.toString().length === 1 ? '0' + day : day
      hour = hour.toString().length === 1 ? '0' + hour : hour
      minute = minute.toString().length === 1 ? '0' + minute : minute
      second = second.toString().length === 1 ? '0' + second : second
      let result =
        myDate.getFullYear() + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
      return result
    },
    scrollToBottom() {
      this.$nextTick(() => {
        let container = this.$el.querySelector('#chat_content')
        container.scrollTop = container.scrollHeight
      })
    },
    imageClick(e) {
      console.log(e)
      let imgArr = []
      imgArr.push(e.target.currentSrc)
      ImagePreview(imgArr)
    }
  }
}
</script>
<style lang="scss" scoped>

.container-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header{
  align-items: center;
  background-color: #fff;
  box-sizing: border-box;
  color: black;
  padding: 15px;
  height: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 5px 2px rgba($color: #ccc, $alpha: 0.1);
  div {
    flex-grow: 1;
   h1 {
      margin: 0px;
      font-size: 1.5rem;
      font-weight: bolder;
    }
  }
}
.chat-content {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 20px;
  .word {
    display: flex;
    margin-bottom: 20px;
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
    .info {
      margin-left: 10px;
      // .time {
      //   // font-size: 22px;
      //   // color: rgba(51, 51, 51, 0.8);
      //   // margin: 0;
      //   height: 20px;
      //   line-height: 20px;
      //   margin-top: -5px;
      // }
      .info-content {
        // padding: 10px;
        font-size: 14px;
        // background: rgb(66, 171, 219);
        border: 1px solid lightgray;
        border-radius: 5px;
        position: relative;
        margin-top: 8px;
        color: #333333;
      }
    }
  }

  .word-my {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
    .info {
      // margin-left: 10px;
      // text-align: right;
      // .time {
      //   font-size: 12px;
      //   color: rgba(51, 51, 51, 0.8);
      //   margin: 0;
      //   height: 20px;
      //   line-height: 20px;
      //   margin-top: -5px;
      //   margin-right: 10px;
      // }
      .info-content {
        max-width: 90%;
        // padding: 10px;
        font-size: 14px;
        float: right;
        margin-right: 10px;
        position: relative;
        margin-top: 8px;
        background: #E6F0FB;
        text-align: left;
        color: #5D6878;
        border: 1px solid lightgray;
        border-radius: 5px;
      }
    }
  }
}
// .van-cell-group__title {
//   padding: 8px 8px 4px;
//   color: black;
// }
// .van-cell {
//   padding: 5px 8px;
// }
// .upload-div {
//   display: flex;
//   flex-direction: column;
//   justify-content: center;
//   align-items: center;
// }
// .nav-color {
//   background-color: #F7F8FA
// }
.pull-s {
  // flex-grow: 1;
  margin-bottom: 320px;
}
.p-10 {
  padding:10px;
}
// .w-200 {
//   width: 180px;
// }
// .d-guess {
//   text-align: left;
//   padding: 8px 8px;
//   background-color: #F6F6F9;
// }
// .d-more {
//   text-align: center;
//   color:#4DA9FF;
// }
.d-stamp {
  text-align: center;
  margin-bottom: 10px;
}
// .s-stamp {
//   background-color:#E2E3E5;
//   padding: 4px 20px;
//   font-size: 10px;
//   border-radius: 4px;
//   color: #fff;
// }
.s-close {
  background-color:#E2E3E5;
  padding: 4px 20px;
  font-size: 10px;
  border-radius: 4px;
  color: #fff;
}
// .d-add {
//   display: flex;
//   flex-direction: column;
// }
// .d-showMore {
//   height: 60px;
//   background-color:#E2E3E5;
//   display: flex;
//   flex-direction: row;
//   justify-content: center;
//   align-items: center;
//   padding-left:10px;
// }
// .d-more-container {
//   width: 60px;
//   height: 100%;
//   margin-right: 10px;
//   display: flex;
//   flex-direction: column;
//   justify-content: center;
//   align-items: center;
// }
// .d-more-box {
//   width: 40px;
//   height: 40px;
//   display: flex;
//   flex-direction: column;
//   justify-content: center;
//   align-items: center;
//   background-color:#F7F8FA;
//   margin-bottom:5px;
// }
// .s-more-name {
//   font-size: 9px;
//   margin-bottom: 5px;
//   color:#333333;
// }
// .d-grow {
//   flex-grow: 1;
// }
</style>

